<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="decorator" %>
<%@taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Question Manage</title>
<link href="${pageContext.request.contextPath}/static/css/jquery.dataTables.css" rel="stylesheet"/>
	<script src="${pageContext.request.contextPath}/static/js/jquery.dataTables.js"></script>
<% String name = (String)request.getSession().getAttribute("userName"); %>
<script>
$(function() {
	$('#inlineEditDataTable').DataTable({
		lengthMenu: [
		             [ 5, 10, 15, -1 ],
		             [ '5 rows', '10 rows', '15 rows', 'Show all' ]
		         ],
	          'language': {  
	                'emptyTable': '没有数据',  
	                'loadingRecords': '加载中...',  
	                'processing': '查询中...',  
	                'search': '查询:',  
	                'lengthMenu': '每页 _MENU_ 条',  
	                'zeroRecords': '没有数据',  
	                'paginate': {  
	                    'first':      '第一页',  
	                    'last':       '最后一页',  
	                    'next':       '',  
	                    'previous':   ''  
	                },  
	                'info': '第 _PAGE_ 页 / 总 _PAGES_ 页',  
	                'infoEmpty': '没有数据',  
	                'infoFiltered': '(过滤总件数 _MAX_ 条)'  
	            },
	        "aoColumnDefs": [
	          { 'bSortable': false, 'aTargets': [ "no-sort" ] }
	        ],
	        "fnInitComplete": function(oSettings, json) { 
	          $('.dataTables_filter input').attr("placeholder", "Search");
	        }

	});
});
</script>
<script>
function Delete() {
	if (confirm("是否确认删除？")) {
		return true;
	}
	return false;
} 
</script>
<script type="text/javascript">
	//删除信息提示
	 $(function() {
		if ("${msg}" != '') {
			 $("#deleteMsg").css("display","block");
				setTimeout(function(){$("#deleteMsg").css("display","none"); 
				},3000);
		}
	})
	
	$(function(){
	   $(".close").click(function(){
	      $("#myAlert").alert();
	   });
	});  
	//修改信息提示
	$(function() {
		if ("${editMsg}" != '') {
			alert("${editMsg}");
		}
	})
	 //增加信息提示
	$(function() {
		if ("${addMsg}" != '') {
			alert("${addMsg}");
			/* $("#sucMsg").css("display","block");
			setTimeout(function(){
				$("#sucMsg").css("display","none");
			},2000); */
		}
	}) 
	function update() {
		var flag = document.getElementById("edit");
		if (confirm("是否确认修改？")) {
			return true;
		}
		return false;
	}
	
	
	 function Delete() {
		//var flag = document.getElementById("delete");
		if (confirm("是否确认删除？")) {
			return true;
		}
		return false;
	}  
	
</script>
<!-- validate前端校验 -->
<script>
$().ready(function() {
    $("#form1").validate({
    	rules: {
    		"examTiName":{
    		 required:true,
    		},
    		"examTiOptiona":{
    			required:true,
    		},
    		"examTiOptionb":{
    			required:true,
    		},
    		"examTiOptionc":{
    			required:true,
    		},
    		"examTiOptiond":{
    			required:true,
    		},
    		"examTiKey":{
    			required:true,
    		},
    		"examTiPoint":{
    			required:true,
    			digits:true,
    		}
	    },
	    messages: {
   		 "examTiName": "请输入题干",
   		 "examTiOptiona":"请输入选项A的内容",
   		 "examTiOptionb":"请输入选项B的内容",
   		 "examTiOptionc":"请输入选项C的内容",
   		 "examTiOptiond":"请输入选项D的内容",
   		 "examTiKey":"请选择正确答案",
   		 "examTiPoint":"请输入本题分值"
	    }
    });
});
</script>
<!-- 新增模态框Ajax -->
<script>
	$(function(){
		$("#submit").click(function(){
			if ($("#form1").valid()) {
				var tiName =$("#examTiName").val();
				var tiDiffculty =  $("#diffculty input:radio:checked").val();
				var tiType = $("#type input:radio:checked").val();
				var subjectId = $("#examSubjectId").val();
				var tiOptiona = $("#examTiOptiona").val();
				var tiOptionb = $("#examTiOptionb").val();
				var tiOptionc= $("#examTiOptionc").val();
				var tiOptiond = $("#examTiOptiond").val();
				var tiKey = $('input:radio:checked').val();
				var tiPoint = $('#examTiPoint').val();
				$.ajax({
					url:"${pageContext.request.contextPath }/exam/addTi",
					dataType:"json",
					data:{
						examTiName:tiName,
						examTiDifficulty:tiDiffculty,
						examTiType:tiType,
						examSubjectId:subjectId,
						examTiOptiona:tiOptiona,
						examTiOptionb:tiOptionb,
						examTiOptionc:tiOptionc,
						examTiOptiond:tiOptiond,
						examTiKey:tiKey,
						examTiPoint:tiPoint,
					},
					type:"post",
					async:true,
					success:function(data){
						$("#sucMsg").css("display","block");
						setTimeout(function(){
							$("#sucMsg").css("display","none");
						//alert(66);
						},2000);
						if(setTimeout(function(){
							$("#sucMsg").css("display","none");
						},4000)==true){
							setTimeout(function(){
								$("#myAddModal").modal("hide");
							},4000);
						}
							var url = "${pageContext.request.contextPath }/exam/questionList";
							window.location.href=url;
					},
					error:function(data){
						alert("增加失败");
						$("#eroMsg").css("display","block");
						setTimeout(function(){$("#eroMsg").css("display","none")},10000);
					}
				})
			}
		})	
		
		$("#close").click(function(){
			var url = "${pageContext.request.contextPath }/exam/questionList";
			window.location.href=url;
		})
	});
</script>

<!-- 取值 -->
<script>
function editSubject(id){
	$.ajax({
		url:"${pageContext.request.contextPath }/exam/editTi/"+id+"?ajax=true",
		dataType:"json",
		type:"GET",
		async:true,
		success:function(data){
		$.each(data.tis, function(i, stu) {
		$("#examTiId1").val(id);
		$("#examTiName1").val(stu.examTiName);
		$("#examTiOptiona1").val(stu.examTiOptiona);
		$("#examTiOptionb1").val(stu.examTiOptionb);
		$("#examTiOptionc1").val(stu.examTiOptionc);
		$("#examTiOptiond1").val(stu.examTiOptiond);
		if(stu.examTiKey=="a"){
			$("#key1").attr({checked:"checked"});
		}else if(stu.examTiKey=="b"){
			$("#key2").attr({checked:"checked"});
		}else if(stu.examTiKey == 'c'){
			$("#key3").attr({checked:"checked"});
		}else if(stu.examTiKey == 'd'){
			$("#key4").attr({checked:"checked"});
		}
		$("#examTiPoint1").val(stu.examTiPoint);
		})
		},
		error:function(data){
			alert("error");
		}
	});
}
</script>

<!-- 编辑提交 -->
<script type="text/javascript">
$(function(){
	$("#submit1").click(function(){
		 if ($("#form1").valid()) {
			var id1 = $("#examTiId1").val();
			/* var id2 = $("#examSubjectId1").val(); */
			var tiName1 =$("#examTiName1").val();
			var tiOptiona1 = $("#examTiOptiona1").val();
			var tiOptionb1 = $("#examTiOptionb1").val();
			var tiOptionc1= $("#examTiOptionc1").val();
			var tiOptiond1 = $("#examTiOptiond1").val();
			var tiKey1 = $('input:radio:checked').val();
			var tiPoint1 = $("#examTiPoint1").val();
			$.ajax({
				url:"${pageContext.request.contextPath }/exam/editTi",
				dataType:"json",
				data:{
					examTiId:id1,
					/* examSubjectId:id2, */
					examTiName:tiName1,
					examTiOptiona:tiOptiona1,
					examTiOptionb:tiOptionb1,
					examTiOptionc:tiOptionc1,
					examTiOptiond:tiOptiond1,
					examTiKey:tiKey1,
					examTiPoint:tiPoint1,
				},
				type:"POST",
				async:true,
				success:function(data){
					$("#editSucMsg").css("display","block");
					setTimeout(function(){
						$("#editSucMsg").css("display","none");
					//alert(66);
					},2000);
					if(setTimeout(function(){
						$("#editSucMsg").css("display","none");
					},4000)==true){
						setTimeout(function(){
							$("#myEditModal").modal("hide");
						},4000);
					}
						var url = "${pageContext.request.contextPath }/exam/questionList";
						window.location.href=url;
				},
				error:function(data){
					$("#editEroMsg").css("display","block");
					setTimeout(function(){$("#editEroMsg").css("display","none")},10000);
					alert("修改失败");
				}
			})
		}
	})	
		$("#close").click(function(){
			var url = "${pageContext.request.contextPath }/exam/questionList";
			window.location.href=url;
		})
	});
</script>

</head>
<body>
	<table class="table table-hover table-striped table-bordered" 
			cellSpacing="0" cellPadding="0" id="inlineEditDataTable">
		<thead>
		<tr style="text-align: center;" class="info">
			<td>题目</td>
			<!-- <td>难度</td>
			<td>题型</td> -->
			<td>题干</td>
			<td>选项A</td>
			<td>选项B</td>
			<td>选项C</td>
			<td>选项D</td>
			<td>答案</td>
			<td>分值</td>
			<td>编辑</td>
			<td>删除</td>
		</tr>
		</thead>
		<tbody>
		<c:forEach items="${tiList }" var="tiList">
			<tr>
				<td>第${tiList.examTiId }题</td>
				<%-- <td>${tiList.examTiDifficulty }</td>
				<td>${tiList.examTiType }</td> --%>
				<td>${tiList.examTiName }</td>
				<td>${tiList.examTiOptiona }</td>
				<td>${tiList.examTiOptionb }</td>
				<td>${tiList.examTiOptionc }</td>
				<td>${tiList.examTiOptiond }</td>
				<td>${tiList.examTiKey }</td>
				<td>${tiList.examTiPoint }</td>
				<td class="danger">
					<span class="glyphicon glyphicon-pencil" aria-hidden="true" data-toggle="modal" data-target="#myEditModal" onclick="editSubject(${tiList.examTiId })">
					</span>
				</td>
				<td class="danger"><a class="close glyphicon glyphicon-remove" href="${pageContext.request.contextPath }/exam/deleteTi/${tiList.examTiId}" 
					data-dismiss="alert" id="delete" onclick="return Delete()"></a>	
				</td>
			</tr>
		</c:forEach>
		</tbody>
			<tr style="text-align: center;" class="success">
				<td colspan="11" align="center"><span
					class="glyphicon glyphicon-plus btn btn-sm" aria-hidden="true"
					data-toggle="modal" data-target="#myAddModal"></span>
				</td>
			</tr>
	</table>
		<!-- 删除信息提示 -->
		<div id="deleteMsg" class="alert alert-success alert-dismissable" style="display:none;height:40px" >
					删除成功！
			 <button type="button" class="close" data-dismiss="alert" 
					  aria-hidden="true">
					  &times;
			 </button>
		</div>
		
		<!-- 新增模态框 -->
		<!-- Modal 新增模态框 -->
		<div class="modal"  id="myAddModal" tabindex="-1" role="dialog" height="100%"
			aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
						<h4 class="modal-title" id="myModalLabel">增加考题</h4>
					</div>
					<div class="modal-body">
					<form:form method="post" modelAttribute="examTi" id="form1">
						<div class="form-grop">
							<table cellSpacing="0" cellPadding="0" class="table-bordered">
								<tr class="success">
									<td>
										<label for="examSubjectId" class="control-label">科目</label>
									</td>
									<td>
										<form:input path="examSubjectId" class="form-control" type="text"/>
									</td>
								</tr>
								
								<tr class="success" id="diffculty">
									<td>
										<label for="examTiDifficulty" class="control-label">难度</label>
									</td>
									<td>
										<%-- <form:input path="examTiDifficulty" class="form-control" type="text"/> --%>
										<form:radiobutton path="examTiDifficulty" value="1" checked="checked"/>简单&nbsp;&nbsp;
										<form:radiobutton path="examTiDifficulty" value="2"/>正常&nbsp;&nbsp;
										<form:radiobutton path="examTiDifficulty" value="3"/>较难&nbsp;&nbsp;
									</td>
								</tr>
								
								<tr class="success" id="type">
									<td>
										<label for="examTiType" class="control-label">题型</label>
									</td>
									<td>
										<%-- <form:input path="examTiType" class="form-control" type="text"/> --%>
										<form:radiobutton path="examTiType" value="0"/>单选&nbsp;&nbsp;
										<form:radiobutton path="examTiType" value="1"/>多选
									</td>
								</tr>
								
								<tr class="success">
									<td>
										<label for="examTiName" class="control-label">题干</label>
									</td>
									<td>
										<form:input path="examTiName" class="form-control" type="text"/>
									</td>
								</tr>
								<tr class="success">
									<td>
										<label for="examTiOptiona" class="control-label">选项A</label>
									</td>
									<td>
										<form:input path="examTiOptiona" class="form-control" type="text"/>
									</td>
								</tr>
								<tr class="success">
									<td>
										<label for="examTiOptionb" class="control-label">选项B</label>
									</td>
									<td>
										<form:input path="examTiOptionb" name="examTiOptionb" class="form-control" type="text"/>
									</td>
								</tr>
								<tr class="success">
									<td>
										<label for="examTiOptionc" class="control-label">选项C</label>
									</td>
									<td>
										<form:input path="examTiOptionc" name="examTiOptionc" class="form-control" type="text"/>
									</td>
								</tr>
								<tr class="success">
									<td>
										<label for="examTiOptiond" class="control-label">选项D</label>
									</td>
									<td>
										<form:input path="examTiOptiond" name="examTiOptiond" class="form-control" type="text"/>
									</td>
								</tr>
								<tr class="success">
									<td>
										<label for="examTiKey" class="control-label">正确答案</label>
									</td>
									<td>
										<%-- <form:input path="examTiKey"/> --%>
										<!-- <select id="examTiKey">
											<option value="a">A</option>
											<option value="b">B</option>
											<option value="c">C</option>
											<option value="d">D</option>
										</select> -->
										<form:radiobutton path="examTiKey" value="a" checked="checked"/>A&nbsp;&nbsp;
										<form:radiobutton path="examTiKey" value="b"/>B&nbsp;&nbsp;
										<form:radiobutton path="examTiKey" value="c"/>C&nbsp;&nbsp;
										<form:radiobutton path="examTiKey" value="d"/>D&nbsp;&nbsp;
									</td>
									
								</tr>
								<tr class="success">
									<td>
										<label for="examTiPoint" class="control-label">分值</label>
									</td>
									<td>
										<form:input path="examTiPoint" name="examTiPoint" class="form-control" type="text"/>
									</td>
								</tr>
							</table>
						</div>
						
					<div class="modal-footer">
						<button type="button" id="close" class="btn btn-default" data-dismiss="modal">关闭</button>
						<button type="button" id="submit" class="btn btn-primary">保存</button>
						<!-- 添加信息提示 -->
						<div id="sucMsg" class="alert alert-success alert-dismissable" style="display:none">
								 <button type="button" class="close" data-dismiss="alert" 
									  aria-hidden="true">
					 					 &times;
									 </button>
   								增加成功！
						</div>
						<div id="eroMsg" class="alert alert-warning alert-dismissable" style="display:none">
								<button type="button" class="close" data-dismiss="alert" 
									  aria-hidden="true">
					 					 &times;
									 </button>
   								增加失败！
						</div>
					</div>
					</form:form>
					</div>
				</div>
			</div>
		</div>
		
		<!-- 编辑模态框 -->
		<div class="modal fade" id="myEditModal" tabindex="-1" role="dialog" height="100%"
			aria-labelledby="myModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
						<h4 class="modal-title" id="myModalLabel">编辑考题</h4>
					</div>
					<div class="modal-body">
					<form:form method="post" modelAttribute="examTi" id="form1">
						<div class="form-grop">
							<table cellSpacing="0" cellPadding="0" class="table-bordered">
								<form:input path="examTiId" type="hidden" id="examTiId1"/>
								<%-- <form:input path="examSubjectId" type="hidden" id="eaxmSubjectId1"/> --%>
								<tr class="success">
									<td>
										<label for="examTiDifficulty" class="control-label">难度</label>
									</td>
									<td>
										<form:input path="examTiDifficulty" id="examTiDifficulty1" class="form-control" type="text"/>
									</td>
								</tr>
								
								<tr class="success">
									<td>
										<label for="examTiType" id="examTiType1" class="control-label">题型</label>
									</td>
									<td>
										<form:input path="examTiType" class="form-control" type="text"/>
									</td>
								</tr>
								<tr class="success">
									<td>
										<label for="examTiName" class="control-label">题干</label>
									</td>
									<td>
										<form:input path="examTiName" id="examTiName1" class="form-control" type="text"/>
									</td>
								</tr>
								<tr class="success">
									<td>
										<label for="examTiOptiona" class="control-label">选项A</label>
									</td>
									<td>
										<form:input path="examTiOptiona" id="examTiOptiona1" class="form-control" type="text"/>
									</td>
								</tr>
								<tr class="success">
									<td>
										<label for="examTiOptionb" class="control-label">选项B</label>
									</td>
									<td>
										<form:input path="examTiOptionb" id="examTiOptionb1" name="examTiOptionb" class="form-control" type="text"/>
									</td>
								</tr>
								<tr class="success">
									<td>
										<label for="examTiOptionc" class="control-label">选项C</label>
									</td>
									<td>
										<form:input path="examTiOptionc" id="examTiOptionc1" name="examTiOptionc" class="form-control" type="text"/>
									</td>
								</tr>
								<tr class="success">
									<td>
										<label for="examTiOptiond" class="control-label">选项D</label>
									</td>
									<td>
										<form:input path="examTiOptiond" id="examTiOptiond1" name="examTiOptiond" class="form-control" type="text"/>
									</td>
								</tr>
								<tr class="success">
									<td>
										<label for="examTiKey" class="control-label">正确答案</label>
									</td>
									<td>
										<%-- <form:input path="examTiKey"/> --%>
										<!-- <select id="examTiKey">
											<option value="a">A</option>
											<option value="b">B</option>
											<option value="c">C</option>
											<option value="d">D</option>
										</select> -->
										<form:radiobutton path="examTiKey" value="a" checked="checked" id="key1"/>A&nbsp;&nbsp;
										<form:radiobutton path="examTiKey" value="b" id="key2"/>B&nbsp;&nbsp;
										<form:radiobutton path="examTiKey" value="c" id="key3"/>C&nbsp;&nbsp;
										<form:radiobutton path="examTiKey" value="d" id="key4"/>D&nbsp;&nbsp;
									</td>
									
								</tr>
								<tr class="success">
									<td>
										<label for="examTiPoint" class="control-label">分值</label>
									</td>
									<td>
										<form:input path="examTiPoint" id="examTiPoint1" class="form-control" type="text"/>
									</td>
								</tr>
							</table>
						</div>
					<div class="modal-footer">
						<button type="button" id="close" class="btn btn-default" data-dismiss="modal">关闭</button>
						<button type="button" id="submit1" class="btn btn-primary">保存</button>
						<!-- 添加信息提示 -->
						<div id="editSucMsg" class="alert alert-success alert-dismissable" style="display:none">
								 <button type="button" class="close" data-dismiss="alert" 
									  aria-hidden="true">
					 					 &times;
									 </button>
   								编辑成功！
						</div>
						<div id="editEroMsg" class="alert alert-warning alert-dismissable" style="display:none">
								<button type="button" class="close" data-dismiss="alert" 
									  aria-hidden="true">
					 					 &times;
									 </button>
   								编辑失败！
						</div>
					</div>
					</form:form>
					</div>
				</div>
			</div>
		</div>
		
</body>
</html>